
<!DOCTYPE html>
<html>
<head>

	<title>Leaflet.GridLayer.Vector.Slicer demo</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />

</head>
<body style='margin:0'>

	<div id="map" style="width: 100vw; height: 100vh"></div>
	
	<script type="text/javascript"  src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
	<script type="text/javascript"  src="dist/Leaflet.VectorGrid.bundled.js"></script>
	<script type="text/javascript"  src="dist/jquery-2.1.4.min.js"></script>
	<!-- <script type="text/javascript" src="../dist/Leaflet.VectorGrid.bundled.js"></script> -->
	
	<script>

		var map = L.map('map');

		var cartodbAttribution = '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>';

	var basemap=L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar'}).addTo(map);

		var highlight;
		var clearHighlight = function() {
			if (highlight) {
				vectorGrid.resetFeatureStyle(highlight);
			}
			highlight = null;
		};
		var vectorTileStyling = {
				fill: true,
				weight: 1,
				fillColor: '#2b2b2b',
				color: '#2b2b2b',
				fillOpacity: 0.2,
				opacity: 0.4
			}
		 var localUrl = "http://localhost:8081/geoserver/gwc/service/tms/1.0.0/cite%3AMilitary_GZQ@3857@pbf/{z}/{x}/{-y}.pbf";

		        var localVectorTileOptions = {
            rendererFactory: L.svg.tile,
            //attribution: 'mycontributors',
			 getFeatureId: function(feature) {
    return feature.properties.id;
  },
            vectorTileLayerStyles: vectorTileStyling,
        };
        var vectorGrid = L.vectorGrid.protobuf(localUrl, localVectorTileOptions).addTo(map);

		map.on('click', clearHighlight);

		map.setView({ lat: 39, lng: 117.7 }, 5);

	</script>
</body>
</html>
